<template>
	<view class="classtime-card">
		<view class="classtime-card-top fcb">
			<view class="u-line-1 class-name">{{ item.class_name || '-' }}({{ item.course_name || '-' }})</view>
			<view class="font-primary" v-if="item.status === 0 && showDelete" @click="$onBlock">删除</view>
		</view>
		<view class="classtime-card-content">
			<view class="classtime-card-content-top fcc">
				<u-avatar :src="item.teacher_headimgurl" size="80rpx"></u-avatar>
				<view class="flex-1 flex-col cc-p-l-16">
					<view class="fcb cc-m-b-12">
						<view class="teacher-name flex-1 u-line-1">
							{{ item.teacher_name }}
						</view>
						<view class="fc">
							<u-tag v-if="courseStatus" plain plainFill size="mini" shape="circle"
								:type="courseStatus.type" :text="courseStatus.label"></u-tag>
						</view>
					</view>
					<view class="fc font-info">
						<text>{{ item.cla_date }}</text>
						<text class="cc-p-x-12">{{ courseTimeWeek }}</text>
						<text>{{ item.start_time }}~{{ item.end_time }}</text>
					</view>
				</view>
			</view>
			<slot name="action">
				<view class="classtime-card-content-bottom">
					<u-row gutter="15">
						<block v-if="item.status === 0">
							<u-col span="6">
								<u-button size="small" plain type="primary" text="调课" @click="$onBlock"></u-button>
							</u-col>
							<u-col span="6">
								<u-button size="small" type="primary" text="上课点名" @click="$onBlock"></u-button>
							</u-col>
						</block>
						<block v-else-if="item.status === 1">
							<u-col span="6"><u-button size="small" plain type="error" @click="$onBlock"
									text="撤销点名"></u-button></u-col>
							<u-col span="6"><u-button size="small" plain type="primary" @click="$onBlock"
									text="上课记录"></u-button></u-col>
						</block>
					</u-row>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	import {
		getWeek
	} from '@/codecat/config/index';

	export default {
		props: {
			item: {
				type: Object,
				default: () => {},
				require: true
			},
			showDelete: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			// status 状态 0:待点名 1:已点名 2:已取消
			courseStatus() {
				return this.$getDict('classCourseStatus', this.item.status);
			},
			courseTimeWeek() {
				return this.item?.cla_date ? '周' + getWeek(this.item.cla_date) : '';
			}
		},
	};
</script>

<style lang="scss" scoped>
	.classtime-card {
		background: linear-gradient(180deg, #dfeaff 1%, #ffffff 72%);
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		overflow: hidden;

		&-top {
			height: 86rpx;
			padding: 0 32rpx;
		}

		.class-name {
			padding-right: 12rpx;
			flex: 1;
			font-weight: 600;
			font-size: 36rpx;
		}

		&-content {
			padding: 0 32rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 7%, #ffffff 100%);
			border-radius: 24rpx 24rpx 0 0;

			&-top {
				display: flex;
				padding: 24rpx 0;

				.teacher-name {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			&-middle {
				height: 96rpx;
				background: $u-primary-light;
				border-radius: 16rpx;

				.flex-col {
					padding-left: 42rpx;
					flex: 1;
				}

				.border-left {
					border-left: 1rpx solid $u-border-color;
				}

				.course-info {
					font-weight: 600;
					margin-top: 4rpx;
				}
			}

			&-bottom {
				padding: 0 0 24rpx;
			}
		}
	}
</style>